<template>
  <el-scrollbar>
    <el-menu router :default-active="defaultActive">
      <template v-for="item in menus" :key="item.title">
        <el-menu-item
          v-if="item.children.length == 1"
          :index="item.children[0].path"
        >
          <component
            class="icons"
            :is="item.children[0].icon"
            style="width: 16px; height: 16px"
          ></component>
          <span class="ml-2">{{ item.children[0].title }}</span></el-menu-item
        >
        <el-sub-menu :index="item.title" v-else>
          <template #title>
            <component
              class="icons"
              :is="item.icon"
              style="width: 16px; height: 16px"
            ></component
            ><span class="ml-2">{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="temp.path"
              v-for="temp in item.children"
              :key="temp.path"
            >
              <component
                class="icons"
                :is="temp.icon"
                style="width: 16px; height: 16px"
              ></component>
              <span class="ml-2">{{ temp.title }}</span></el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
import menus from "@/router/menus";
import { useRoute } from "vue-router";
const route = useRoute();
const defaultActive = route.fullPath;
</script>

<style lang="scss" scoped>
.ml-2 {
  margin-left: 20px;
}
</style>